<%@ page contentType="text/html;charset=UTF-8"
         isELIgnored="false" language="java" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <title>选择题</title>
    <link rel="stylesheet" href="${base}/css/3af1bf1fa0061831.css">
    <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
    <style>
        .divCss{
            margin-bottom: 10px;
        }
        .olCss{
            padding-left: 20px;
            margin-top: 0px;
            margin-bottom: 0px;
            margin-left: 40px;
        }
        .inputClass {
            float:left;
            margin-left: -50px;
        }
        .liRight {

        }
        .pp2{
            width: 500px;
            border:5px solid darkgrey;
            margin-bottom: 10px;
        }
        .bj1{
            margin-left: 200px;
        }
        .zt1{
            font-weight: bold;
            font-size: 30px;
            margin-bottom: 10px;
        }
        .zt2{
            font-weight: bold;
            font-size: 15px;
            margin-bottom: 10px;
        }
        .zt3{margin-right: 30px}

    </style>
</head>
<body>
<!--
type默认为数字,其他类型有英文字母A/a,罗马字母I/i,
start可以设置起始标记 下标从1开始
-->
<div class="zt1">${exam.subject}专项练习</div>
<div class="div_all_top">
    <div class="div_all_title">在线考试系统</div>
    <div class="div_all_ke">
        <span style="margin-left: 10%">专业阶段：${exam.subject}</span>
        <span style="margin-left: 20%" id="time"></span>
        <span style="margin-left: 20%;color: #d43c3c;">总分：${exam.allscore}</span>
    </div>
    <div class="div_all_ke">
        <b style="margin-left: 5%">姓名:${theUser.name}
            <button style="margin-left: 70%;height: 38px" class="div_span_submit" type="submit">提交</button>
    </div>
</div>
<fieldset class="layui-elem-field site-demo-button" style="margin-top: 30px;">
    <legend>考试进度</legend>
    <div>
        <br>
        <div class="layui-progress layui-progress-big g-container" lay-showPercent="yes" lay-filter="demo" style="    background: #eee;">
            <div id="demss" class="layui-progress-bar layui-bg-green g-progress" lay-percent="0%" style="background: #0f0;"></div>
        </div>
        <br>
    </div>
</fieldset>

<hr>
<div class="zt2">
    【单选题】
</div>

<div class="div_all">

    <hr>
    <div class="divCss">

        <form method="post" action="${base}/exam/addExamSheet" id="form1">
            <input type="hidden" name="userid" value="${theUser.id}">
            <input type="hidden" name="examid" value="${exam.id}">

            <%--            <input type="hidden" name="titles" value="${titles}">--%>
            <c:forEach var="t" items="${titles}">
                <input type="hidden" name="titleids" value="${t.id}">
                <input type="hidden" name="answer" value="${t.answer}">
                <span>${t.title}</span>
                <ol type="A" start="" class="olCss" name="single" >
                    <div class="pp2">
                        <input class="inputClass" type="radio" name="${t.id}" value="A"/><li class="liRight">A.${t.choice1}</li>
                    </div><hr>
                    <div class="pp2">
                        <input class="inputClass" type="radio" name="${t.id}" value="B" /><li class="liRight">B.${t.choice2}</li>
                    </div><hr>
                    <div class="pp2">
                        <input class="inputClass" type="radio" name="${t.id}" value="C" /><li class="liRight">C.${t.choice3}</li>
                    </div><hr>
                    <div class="pp2">
                        <input class="inputClass" type="radio" name="${t.id}" value="D" /><li class="liRight">D.${t.choice4}</li>
                    </div><hr>
                        <%--            <a class="layui-icon layui-icon-star-fill zt3" href="#">收藏本题</a>--%>
                        <%--            <a class="layui-icon layui-icon-edit zt3" href="#">标记一下</a>--%>
                        <%--            <a class="layui-icon layui-icon-praise zt3" href="#">点一个赞</a>--%>
                        <%--            <a class="layui-icon layui-icon-tread zt3" href="#">小踩一下</a>--%>
                </ol>
            </c:forEach>
            <input class="layui-btn layui-btn-danger bj1" type="button" id="bn" value="提交答案"  />
        </form>
    </div>


    <%--    <input class="layui-btn layui-btn-normal bj1" type="button" value="下一题" />--%>

    <script src="${base}/jquery-3.0.0.min.js"></script>
    <script>

        var maxtime=60*60;
        time=setInterval("CountDown()",1000)
        function CountDown() {
            if(maxtime>=0){
                minutes=Math.floor(maxtime/60);
                seconds=Math.floor(maxtime%60);
                msg="剩余时间:"+minutes+":"+seconds;
                document.getElementById("time").innerHTML=msg;
                --maxtime
            }else {
                clearInterval(time)
            }
        }



        window.onload = function () {
            var allRadio =  ($("input:radio").length)/4;
            $("input:radio").each(function () {
                $(this).click(function () {

                    var  arrlen = $("input:radio:checked").length
                    var p=Math.round((arrlen/allRadio)*100)+"%";
                    $("#demss").css("width",p);
                })
            })
        }



        <%--function sendMsg(){--%>
        <%--    //题目数--%>
        <%--    var singleSize = $("[name='single']").length;--%>
        <%--    //答案数组--%>
        <%--    var answerArr = new Array(singleSize);--%>
        <%--    //单选答案--%>
        <%--    var num = ${titles};--%>
        <%--    $(num).each(function(index){--%>
        <%--        //放入答案--%>
        <%--        var answer = $("input[name='${titles.id}']:checked").val();--%>
        <%--        answerArr[index] = answer;--%>
        <%--    })--%>
        <%--    //在调试模式下的console中查看输出--%>
        <%--    console.log(answerArr);--%>
        <%--    //发送答案到服务器--%>
        <%--}--%>
        $("#bn").click(function () {
            tee();
        })
        function tee()
        {
            //使用插件将表单元素转json
            var jQuery = $("#form1").serializeJSON();
            console.log(jQuery);
            $.ajax({
                "url":"${pageContext.request.contextPath}/exam/addExamSheet1",
                "type":"post",
                "data":  JSON.stringify(jQuery),
                "contentType":"application/json",
                "datatype":"text",
                "success":function (data) {
                    console.log("返回的数据是:"+data);
                    layer.open({
                        title:'考试成绩'
                        ,content: data+"分",
                        yes:function(){
                            location.assign("${pageContext.request.contextPath}/admin/welcome-1.jsp");
                        }
                    });
                }
            });


        <%--$("#bn").click(function () {--%>
        <%--    var  ids =[];--%>
        <%--    var  answer = [];--%>
        <%--    var  useranswer = [];--%>
        <%--    var  c2 =   ${titles.size()};--%>

        <%--    $("input[name='titleids']").each(function (i) {--%>
        <%--        ids[i] = $(this).val();--%>
        <%--    });--%>
        <%--    $("input[name='answer']").each(function (i) {--%>
        <%--        answer[i] = $(this).val();--%>
        <%--    });--%>
            // $("input:radio").each(function (i) {
            //        if(this.checked){
            //         useranswer[i] = $(this).val();
            //        }else {
            //            useranswer[i] = null;
            //        }
            // })
            // alert(useranswer);
            <%--$.post("${base}/exam/addExamSheet1?userid=${theUser.id}&examid=${exam.id}&titleids="+ids+"&answer="+answer,function (result) {--%>
            <%--                        alert(result);--%>
            <%--})--%>

        }

    </script>
</body>
</html>